﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机构设置</title>
    <!-- 引入样式 -->

    @* <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script> *@
    <script src="~/lib/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>

    <style>
        a {
            text-decoration: none; /* 去除下划线 */
        }
        /* 添加页面背景色 */
        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }

        .el-table {
            background-color: white; /* 表格白底，与背景色区分 */
        }
    </style>

</head>
<body>

    <!-- Vue 挂载点 -->
    <div id="app">
        <span>
            您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--III级机构设置
        </span><br />

        <a href="/SJJGSZ/AddCFTK" type="primary">添加</a>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="first_kind_name" label="I级机构名称" width="150"></el-table-column>
            <el-table-column prop="second_kind_name" label="II级机构名称" width="150"></el-table-column>
            <el-table-column prop="second_kind_id" label="II级机构编号" width="150"></el-table-column>
            <el-table-column prop="third_kind_name" label="III级机构名称" width="150"></el-table-column>
            <el-table-column prop="third_kind_sale_id" label=" 销售责任人编号" width="150"></el-table-column>
            <el-table-column prop="third_kind_is_retail" label=" 是否为零售店" width="150"></el-table-column>
            <el-table-column label="变更" width="150">
                <template #default="scope">

                    <a :href="`/SJJGSZ/Update/${scope.row.ftk_id}`">
                        变更
                    </a>

                </template>
            </el-table-column>
            <el-table-column label="删除">
                <template #default="scope">

                    <el-button type="danger"
                               size="small"
                               v-on:click="handleDelete(scope.row)">
                        删除
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

           <el-pagination v-model:current-page="currentPage"
                   v-model:page-size="pageSize"
                   :page-sizes="[1, 2, 3, 5,12]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="rows"
                   v-on:size-change="handleSizeChange"
                   v-on:current-change="handleCurrentChange">
         </el-pagination>

    </div>



    <script type="text/javascript">
        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {
                const tableData = ref([]);

              //当前页
            const currentPage = ref(1);
            //每页显示数
            const pageSize = ref(2);
            //总行数
            const rows = ref(0);


              function fill() {
                axios.get('/SJJGSZ/Index2',{
                     params:{
                        currentPage: currentPage.value,
                        pageSize: pageSize.value
                    }
                })
                .then(res => {
                    console.info(res.data);
                    tableData.value = res.data.list;
                      rows.value = res.data.rows;
                }).catch(err => {
                    console.info(err)
                })

              }

                fill();


             function handleSizeChange(size) {
                pageSize.value = size;
                fill();
            }

            function handleCurrentChange(cpage) {
                currentPage.value = cpage;
                fill();
            }

           
                        // 添加 handleDelete 方法
        const handleDelete = (row) => {
            // 使用 ElementPlus 的确认对话框
            ElementPlus.ElMessageBox.confirm(
                `确定要删除 ${row.first_kind_name} 吗?`,
                '删除确认',
                {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                // 用户点击确认后发送删除请求
                return axios.delete(`/SJJGSZ/Delete/${row.ftk_id}`);
            })
            .then(() => {
                ElementPlus.ElMessageBox.alert('删除成功', '操作结果', { type: 'success' });
                // 刷新表格数据
                fill();
            })
            .catch((err) => {
                // 用户点击取消或发生错误
                if (err !== 'cancel') {
                    console.error("删除失败:", err);
                    ElementPlus.ElMessageBox.alert('删除失败，请稍后重试', '操作结果', { type: 'error' });
                }
            });
        };



                return {
                    tableData,
                    fill,
                    handleDelete,
                    rows,
                    pageSize,
                    currentPage,
                    handleSizeChange,
                    handleCurrentChange,
                };
            }
        });


        app.use(ElementPlus).mount('#app');

    </script>
</body>
</html>